<!DOCTYPE html>
<!--
 * Copyright (c) 2010 The Chromium Authors. All rights reserved.  Use of this
 * source code is governed by a BSD-style license that can be found in the
 * LICENSE file.
 *
 * Author: Eric Bidelman <ericbidelman@chromium.org>
-->
<html>
<head>
<title>Your Picasa Tag List</title>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
    <script type="text/javascript" src="js/util.js"></script>
    <script type="text/javascript" src="js/photos.js"></script>
    <script type="text/javascript" src="js/tags.js"></script>
    <script type="text/javascript" src="js/authenticate.js"></script>
<style type="text/css">
body {
  font: 12px 'Myriad Pro', 'Tw Cen MT', Arial, Verdana, sans-serif;
  color: #666666;
  overflow-x: hidden;
}
ul {
  padding: 0;
  list-style: none;
}
li {
  clear: both;
  display: inline;
  padding: 2px 0px;
  margin: 10px;
  border: 2px solid black;
  border-radius: 10px;
  font-size: 12pt;
}
li div img {
  margin: 0 5px;
  vertical-align: middle;
}
li div {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 250px;
  float: left;
  padding: 2px 0;
}
li span {
  margin-left: 5px;
}
li:hover {
  background-color: #fffccc;
}
a {
 color: #4E7DC2;
 text-decoration: none;
}
a:hover {
  color: #880000;
  text-decoration: underline;
}
#butter {
  color: #fff;
  background-color: #000033;
  padding: 5px 20px;
  border-radius: 15px;
  width: auto;
  text-align: center;
  float: right;
  display: none;
}
#butter.error {
  background-color: red;
}
#new_doc_container {
  display: none;
}
#new_doc_container input[type='text'],textarea {
  width: 100%;
}
#tags {
  width: 400px;
  border: 2px black solid;
  border-radius: 4px;
  float: left;
}

#tags div {
    display: inline-block;
    border: 2px black solid;
    border-radius: 7px;
    font-size: 12pt;
    padding: 2px;
    margin: 2px 5px 0px 0px;
   white-space: nowrap;

}

#photoTags {
  width: 400px;
  border: 2px black solid;
  border-radius: 4px;
  float: right;
}


#photoTags div {
    display: inline-block;
    border: 2px black solid;
    border-radius: 7px;
    font-size: 12pt;
    padding: 2px;
    margin: 2px 5px 0px 0px;
    white-space: nowrap;
}


</style>
</head>
<body>

<div style="height:15px;">
  <div style="float:left;">
    <a id='refresh-docs' >Refresh list</a>,
  </div>
  <div id="butter">Fetching your docs</div>
</div>
User Id: <span id='user-id'>1</span><br/>
Album Id: <span id='album-id'>2</span><br/>
Progress: <span id='progress'></span>
<div id="photos"></div>
<input type='text' id='tagFilter'/><input type='button' id='apply-btn' value='Apply'/><br/>
<div id="tags" ></div>
<div id="photoTags"></div>
    <script type="text/javascript" src="js/info_startup.js"></script>
</body>
</html>
